<template>
	<!-- <a-sub-menu :key="subMenu.name" :title="subMenu.meta.title"> -->
	<a-sub-menu :key="subMenu.name" popupClassName="layout-sideMenu-popup">
		<template #title>
			<span :style="{ color: isActiveSubMenuIcon ? primaryColor_rgb : 'black' }">{{ subMenu.meta.title }}</span>
		</template>
		<template #icon>
			<span v-if="subMenu.meta.icon" :class="['menu-item-aliIcon','iconfont',`icon-${subMenu.meta.icon}`]" :style="{...iconStyle,color:activePath.includes(subMenu.name)?primaryColor_rgb:'black'}"></span>
		</template>
		<template v-for="(item, index) in subMenu.children">
			<a-menu-item v-if="!item.children" :key="item.name" :title="item.meta.title" @click="bindMenuItemClicked(item)">
				<template #icon>
					<span v-if="item.meta.icon" :class="['menu-item-aliIcon','iconfont',`icon-${item.meta.icon}`]" :style="{...iconStyle,color:selectedKey==item.name?primaryColor_rgb:'black'}"></span>
				</template>
				<span>{{ item.meta.title }}</span>
			</a-menu-item>
			<mySubMenu v-else :subMenu="item" :key="index" :selectedKey="selectedKey" :activePath="activePath" :iconStyle="iconStyle" :isNeedSubMenuIconActive="false" />
		</template>
	</a-sub-menu>
</template>
<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
import { computed,toRaw} from 'vue'
import {primaryColor_rgb,primaryColorFade} from "@/theme/config"

const props = withDefaults(
	defineProps<{
		subMenu: routeItemConfig
		selectedKey: string
		activePath?: string[]
		iconStyle: any
		isNeedSubMenuIconActive?: boolean
	}>(),
	{ selectedKey: '', isNeedSubMenuIconActive: true, activePath: () => [] }
)

const router = useRouter()
const route = useRoute()

const isActiveSubMenuIcon = computed(() => {
	return props.isNeedSubMenuIconActive && props.activePath.includes(props.subMenu.name)
})

const bindMenuItemClicked=(i:routeItemConfig)=>{
	//console.log(i)
	if(!i.meta.link&&!i.component) {
		console.warn('请配置组件路径',toRaw(i))
		return
	}
	if(i.meta.link)
	window.open(i.path)
	else
	if (route.name !== i.name) router.push({ name:i.name})
}
</script>

<style lang="less">
.layout-sideMenu-popup {
	.ant-menu-item,
	.ant-menu-submenu-title {
		display: flex;
	}

	.ant-menu-item-icon {
		// height: 100%;
		display: inline-flex;
		align-items: center;
	}
}
</style>
